<template>
  <div class="raise">
    <div class="top">创建用户资料信息</div>
    <div class="top-1">管理用户基本信息</div>
    <div>
      <el-divider />
      <div class="top-2">
        <div class="username">
          用户名：<input type="text" v-model="createdata.username" />
        </div>
        <!-- 下拉菜单 -->
        <div class="username">
          部门名称：
          <el-select
            v-model="createdata.branch"
            class="m-2"
            placeholder="请选择部门名称"
            size="small"
          >
            <el-option
              v-for="item in branchlist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="top-3">
        <div>密码：<input type="password" v-model="createdata.pass" /></div>
        <div>
          职位名称：<input
            type="text"
            v-model="createdata.posname"
            placeholder="职位名称"
          />
        </div>
      </div>
      <div class="top-4">
        <div>
          员工姓名：<input v-model="createdata.name" type="text" placeholder="员工姓名" />
        </div>
        <button>查询</button>
        <div>
          职务类别：
          <el-select
            v-model="createdata.postype"
            class="m-2"
            placeholder="请选择职位类型"
            size="small"
          >
            <el-option
              v-for="item in postypelist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </div>
    <div class="bottom">
      <el-row class="mb-4">
        <el-button type="primary" @click="create">确认保存</el-button>
        <el-button type="info">取消保存</el-button>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import axios from "axios";
import { onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
var router =useRouter();
const branchlist = [
  {
    value: "研发部",
    label: "研发部",
  },
  {
    value: "行政部",
    label: "行政部",
  },
];
let postypelist = [
  {
    value: "总经理",
    label: "总经理",
  },
  {
    value: "副经理",
    label: "副经理",
  },
  {
    value: "省经理",
    label: "省经理",
  },
];
var createdata = reactive({username:'',branch:'',pass:'',posname:'',name:'',postype:''});

var create = () => {
  axios.post("/api/user/create",createdata).then((res) => {
    console.log(res);
    if(res.data.status==200){
      alert(res.data.msg)
      router.push('/index/home/xhz/users')
    }
  });
};
</script>

<style  scoped>
.top {
  font-size: 20px;
  margin-bottom: 30px;
  margin-left: 400px;
}
.top-2 {
  display: flex;
  margin-bottom: 20px;
}
.top-2 div {
  margin-right: 24px;
}
.top-3 {
  display: flex;
  margin-bottom: 20px;
}
.top-3 div {
  margin-right: 24px;
}
.top-4 {
  display: flex;
  margin-bottom: 20px;
}
.top-4 div {
  margin-right: 24px;
}
.bottom {
  margin-left: 400px;
  margin-top: 120px;
}
</style>